<template>
    <div class="etb-info">
    <!-- 上部表单区域 -->
        <div class="etb-form">
            <el-form :model="etbForm" :rules="rules" ref="etbForm" label-width="100px" size="small">
                <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="状态" prop="status">
                        <el-input v-model="etbForm.status" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户号" prop="customerNumber">
                        <el-input v-model="etbForm.customerNumber" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="建议结论" prop="recommendation">
                        <el-select v-model="etbForm.recommendation" placeholder="请选择建议结论" clearable>
                            <el-option
                                v-for="item in recommendationOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="意见" prop="opinion">
                        <el-input type="textarea" v-model="etbForm.opinion" :rows="4" style="width: 800px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
<!--    <div class="pagination-container" style="margin-top: 20px; text-align: left;">-->
<!--            <el-pagination-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="currentPage"-->
<!--            :page-sizes="[20, 30, 50]"-->
<!--            :page-size="pageSize"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            size="small"-->
<!--            :total="total">-->
<!--            </el-pagination>-->
<!--    </div>-->
      <!--扩展的分页插件 包含跳转到首页和末页的功能-->
      <div class="container" >
        <el-pagination
            class="ahead-page"
            :current-page="tablePage.currentPage"
            :page-sizes="pageSizeArr"
            :page-size="tablePage.pageSize"
            layout="slot"
            :pager-count="5"
            :total="tablePage.totalResult"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
          <!-- slot部分，跳转首页 -->
          <button
              class="firstPage"
              :disabled="tablePage.firstPageDisabled"
              @click="toFirstPage">
            <i class="el-icon-d-arrow-left"></i>
          </button>
        </el-pagination>
        <el-pagination
            class="rear-page"
            :current-page="tablePage.currentPage"
            :page-sizes="pageSizeArr"
            :page-size="tablePage.pageSize"
            :pager-count="5"
            layout="prev,pager,jumper,total, next, slot"
            :total="tablePage.totalResult"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
          <!-- slot部分，跳转末页 -->
          <button
              class="lastPage"
              :disabled="tablePage.lastPageDisabled"
              @click="toLastPage"
          >
            <i class="el-icon-d-arrow-right"></i>
          </button>
        </el-pagination>

      </div>
        <!-- 下部数据表格区域 -->
        <div class="table-card" style="margin-top: 20px;">
            <el-table :data="currentPageData" style="width: 100%" border max-height="700px" size="small">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="status" label="状态" width="120"></el-table-column>
                <el-table-column prop="customerNumber" label="客户号" width="150"></el-table-column>
                <el-table-column prop="recommendation" label="建议结论"></el-table-column>
                <el-table-column prop="opinion" label="意见"></el-table-column>
            </el-table>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            etbForm: {
                status: '待处理',
                customerNumber: 'CN000123456',
                recommendation: '',
                opinion: ''
            },
            recommendationOptions: [
                { value: 'option1', label: '选项1' },
                { value: 'option2', label: '选项2' },
                { value: 'option3', label: '选项3' }
            ],
            rules: {
                recommendation: [
                { required: true, message: '请输入建议结论', trigger: 'change' }
                ]
            },
            // 表格全量数据
            tableData: [],
            // 分页相关
            // currentPage: 1,
            // pageSize: 10,
            // total: 0,

            pageSizeArr: [10, 20, 30, 40], //  显示条目数组
            tablePage: {
              currentPage: 1, //  当前页
              pageSize: 10, //  展示数量
              totalResult: 100, //  总数
              firstPageDisabled: false, //  首页
              lastPageDisabled: true, //  末页
              totalpage: 0 //  总页数
            },
          currentPageData:[]
            }


        },
  // 监听分页相关数据
    watch: {
      // 分页 计算首页和末页
      tablePage: {
        handler(newVal) {
          let pages = Math.ceil(newVal.totalResult / newVal.pageSize);
          if (pages === 0) {
            // 数据(totalResult)为0
            this.tablePage.firstPageDisabled = true; // 首页按钮是否禁用
            this.tablePage.lastPageDisabled = true; // 末页按钮是否禁用
          } else {
            this.tablePage.firstPageDisabled = newVal.currentPage === 1;
            this.tablePage.lastPageDisabled = newVal.currentPage === pages;
          }
        },
        // 一进页面就执行
        immediate: true,
        deep: true,
      },
    },
    created() {
        //模拟接口查询数据
        // 方案1:前端处理分页  接口返回全量数据
        this.generateMockData()
        //方案2：后端分页  接口返回分页数据 当前页为1
        // this.getEtbList(parameter,tablePage);
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
            this.$message({
                message: '保存成功！',
                type: 'success'
            })
            // 这里可以添加实际的保存逻辑
            } else {
            return false
            }
        })
        },
        resetForm(formName) {
        this.$refs[formName].resetFields()
        },
        // 生成模拟数据
        generateMockData() {
          const mockData = []  //全量数据
          for (let i = 1; i <= 35; i++) {
              mockData.push({
              id: i,
              status: i % 2 === 0 ? '已处理' : '待处理',
              customerNumber: `CN${String(i).padStart(9, '0')}`,
              recommendation: `建议结论${i}`,
              opinion: `意见内容${i}`
              })
          }
          this.tablePage.totalResult = mockData.length
          this.tableData= mockData;
          //当前页展示数据,刚进入展示第一页的数据
          this.currentPageData = mockData.slice(0, this.tablePage.pageSize)
          console.log("查询的全量数据为：",this.tableData)
          console.log("当前页展示数据为：",this.currentPageData)
        },

        getEtbList(){
          // 后端分页  接口返回分页数据
          axios.get('/etb/list', {
            params: {
              page: this.tablePage.currentPage,
              size: this.tablePage.pageSize
            }
          }).then(response => { // 请求成功
            const data = response.data;
            this.tableData = data.records;  //分页数据
            // this.tablePage.totalResult = data.total;
            // this.currentPageData = data.records.slice(0, this.tablePage.pageSize)
          }).catch(error => { // 请求失败
            console.log(error)
          })
        },
        // 分页相关方法
        // handleSizeChange(val) {
        // this.pageSize = val
        // this.handleCurrentChange(1)
        // },
        // handleCurrentChange(val) {
        // this.currentPage = val
        // const start = (val - 1) * this.pageSize
        // const end = start + this.pageSize
        //
        // // 重新生成模拟数据
        // const mockData = []
        // for (let i = 1; i <= 35; i++) {
        //     mockData.push({
        //     id: i,
        //     status: i % 2 === 0 ? '已处理' : '待处理',
        //     customerNumber: `CN${String(i).padStart(9, '0')}`,
        //     recommendation: `建议结论${i}`,
        //     opinion: `意见内容${i}`
        //     })
        // }
        // this.tableData = mockData.slice(start, end)
        // },
      //   改变每页显示数量
      handleSizeChange(pageSize) {
        this.tablePage.pageSize = pageSize;
        //this.handleCurrentChange(1)
        //回到第一页并展示第一页的数据
        this.handleCurrentChange(1)
      },

      //   改变当前页码
      handleCurrentChange(currentPage) {
        this.tablePage.currentPage = currentPage;
        //传入页码查询当前页面的数据
        console.log(this.tableData);
        if(this.tablePage.currentPage >1){
          this.currentPageData = this.tableData.slice((currentPage- 1)*this.tablePage.pageSize, currentPage*this.tablePage.pageSize)
        }else{
          this.currentPageData = this.tableData.slice(0, this.tablePage.pageSize)
        }


        //console.log("切换页面当前页的数据为：",this.currentPageData)
        // const start = (currentPage - 1) * this.pageSize
        // const end = start + this.pageSize
        // const mockData = []
        // for (let i = 1; i <= 35; i++) {
        //   mockData.push({
        //     id: i,
        //     status: i % 2 === 0 ? '已处理' : '待处理',
        //     customerNumber: `CN${String(i).padStart(9, '0')}`,
        //     recommendation: `建议结论${i}`,
        //     opinion: `意见内容${i}`
        //   })
        // }
        // this.tableData = mockData.slice(start, end)

      },

      //   前往首页
      toFirstPage() {
        this.handleCurrentChange(1);
        //  传入页码查询当前页面的数据
      },

      //  前往末页
      toLastPage() {
        let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize);
        this.handleCurrentChange(max);
      },

    }
}
</script>

<style lang="less" scoped>


.etb-form{
    border: 2px solid #ddd;
    height: 200px;
    padding:20px;
}

.table-card {
 border: 2px solid #ddd;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
.container{
  display: flex;
}

.el-pagination {
  margin-top: 10px;
}
.el-pagination.ahead-page {
  padding-right: 0px;
}
.el-pagination.rear-page {
  padding-left: 0px;
}
.firstPage,
.lastPage {
  cursor: pointer;
  margin:0px;
  padding:0px;
  background-color: transparent;
}
.el-pagination{
  background-color: transparent;
}
.el-pager li{
  background-color: transparent;
}
.el-pagination__jump{
  margin-left: 0px;
  padding-right: 5px;
}
/deep/.el-pagination .btn-next{
  padding:0px;
  background: transparent;
}
/deep/ .el-pagination button{
  padding:0px;
  margin: 0px;
}
/deep/.el-pagination__total{
  padding-left: 5px;
  margin:0px;
}
/deep/.el-pagination__jump{
  margin-left: 0px;
}
/deep/ .el-pagination button:disabled{
  background-color: transparent;
}
/deep/ .el-pager li{
  background: transparent;
}
</style>